import * as XLSX from 'xlsx';
import React, { Component } from 'react';
import './UploadClass.css'

class UploadClass extends Component {
    constructor(props){
        super();
        this.state = {
            tableData: [], // table的数据
            tableHeader: [] // table的表头
          };
    }
    onImportExcel =file => {
        // 获取上传的文件对象
        // console.log(123);
        // console.log(file);

        const { files } = file.target;
        // 通过FileReader对象读取文件
        const fileReader = new FileReader();
        fileReader.onload = event => {
          try {
            const { result } = event.target;
            // 以二进制流方式读取得到整份excel表格对象
            const workbook = XLSX.read(result, { type: 'binary' });
            let data = []; // 存储获取到的数据
            // 遍历每张工作表进行读取（这里默认只读取第一张表）
            // console.log(data) null
            for (const sheet in workbook.Sheets) {
              if (workbook.Sheets.hasOwnProperty(sheet)) {
                // 利用 sheet_to_json 方法将 excel 转成 json 数据
                data = data.concat(XLSX.utils.sheet_to_json(workbook.Sheets[sheet]));
                // break; // 如果只取第一张表，就取消注释这行
              }
            }
            console.log(data);
            // data=JSON.stringify(data);
            // for(let i=0;i<data.length;i++){
            //   data[i]
            // }
            fetch('https://yali.geekwhite.cn:3000/changeallclass',{
                method:'POST',
                mode:'cors',
                body:JSON.stringify(data),
              })
            .then(function(res){return res.text()})
            .then(res=>{
                //console.log(JSON.parse(res))
            })
          } catch (e) {
            // 这里可以抛出文件类型错误不正确的相关提示
            console.log('文件类型不正确');
            return;
          }
          };
        // 以二进制方式打开文件
        fileReader.readAsBinaryString(files[0]);
    }

    // uploadFilesChange(file) {
    //     // 通过FileReader对象读取文件
    //     const fileReader = new FileReader();
    //     fileReader.onload = event => {
    //       try {
    //         const {result} = event.target;
    //         // 以二进制流方式读取得到整份excel表格对象
    //         const workbook = XLSX.read(result, {type: 'binary'});
    //         // 存储获取到的数据
    //         let data = {};
    //         // 遍历每张工作表进行读取（这里默认只读取第一张表）
    //         for (const sheet in workbook.Sheets) {
    //           let tempData = [];
    //           // esline-disable-next-line
    //           if (workbook.Sheets.hasOwnProperty(sheet)) {
    //             // 利用 sheet_to_json 方法将 excel 转成 json 数据
    //             console.log(sheet);
    //             data[sheet] = tempData.concat(XLSX.utils.sheet_to_json(workbook.Sheets[sheet]));
    //           }
    //         }
    //         const excelData = data.Sheet1;
    //         const excelHeader = [];
    //         // 获取表头
    //         for (const headerAttr in excelData[0]) {
    //           const header = {
    //             title: headerAttr,
    //             dataIndex: headerAttr,
    //             key: headerAttr
    //           };
    //           excelHeader.push(header);
    //         }
    //         // 解析后的变量赋值给state，重新渲染table页面
    //         // message.success('上传成功！')
    //         this.setState({
    //           tableData: excelData,
    //           tableHeader: excelHeader,
    //         })
    //         console.log(this.state)
    //       } catch (e) {
    //         // 这里可以抛出文件类型错误不正确的相关提示
    //         console.log(e);
    //         // message.error('文件类型不正确！');
    //       }
    //     }
    //     // 以二进制方式打开文件
    //     fileReader.readAsBinaryString(file.file);
    //   }
    render() {
        return (
            <div style={{ marginTop: 10,marginLeft:230 }}>
                <button className='upload-wrap'>
                    {/* <Icon type='upload' /> */}
                    <input className='file-uploader' type='file' accept='.xlsx, .xls' onChange={this.onImportExcel} />
                    <span className='upload-text'>上传文件</span>
                </button>
                <p className='upload-tip'>支持 .xlsx、.xls 格式的文件</p>
            </div >
        )
    }
}


export default UploadClass;

